<template>
	<header class="header">
		<h1>todos</h1>
		<input id="toggle-all" class="toggle-all" type="checkbox"
		 v-model="isAll">
		<label for="toggle-all"></label>
		<input class="new-todo" placeholder="输入任务名称-回车确认" autofocus
		 v-model.trim="content"
		 @keyup.enter="addFn" />
	</header>
</template>

<script>
import {  mapMutations, mapState} from 'vuex'
	export default {
		data(){
			return{
				content:''
			}
		},
		methods:{
			...mapMutations(['add','changeIsAll']),
			addFn(){
				this.add(this.content)
				this.content = ''
			}
		},
		computed:{
			...mapState(['list']),
			isAll:{
				get(){
					return this.list.every(item => item.isDone)
				},
				set(val){
					this.changeIsAll(val)
				}
			}
		}
	}
</script>
